<template>
	<view>

		<u-swiper :list="list1" height='500' :autoplay='false' mode='number' indicator-pos='bottomRight'></u-swiper>
		<view style="position: absolute;top: 470rpx;">
			<view class="sd_one">
				<view class="sd_one_item">
					<text class="sd_one_name">{{scenicInfo.goods.name||''}}</text> <text class="sd_one_level"
						v-if="scenicInfo.goods.grade">{{scenicInfo.goods.grade}}</text>
				</view>
				<view class="sd_one_item" style="margin-top: 30rpx;">
					<u-tag :text="item" size='mini' style="margin-right: 15rpx;" type="info" bg-color='#fff'
						v-for="(item,index) in tags" :key="index" />
				</view>
				<view class="sd_one_item" style="margin-top: 30rpx;">
					<text style="color: #4A4949;">开放时间：{{scenicInfo.goodsInfo.businessTime||'-'}}</text><text
						style="padding-left: 24rpx;padding-right: 24rpx;color: #929292;">|</text><text
						@click="toScenicInfo()" style="color: #929292;">了解更多 ></text>
				</view>
				<view class="sd_one_item"
					style="margin-top: 30rpx;color: #4A4949;position: relative;display: flex;align-items: center;">
					<view style="width: 550rpx;">{{scenicInfo.shop.address||''}}</view>
					<image @click="openLocation()" src="https://aliyunoss.hntgov.net/sd/sd_dh.png"
						style="width: 92rpx;height: 36rpx;position: absolute;right: 0rpx;"></image>
				</view>
			</view>
			<!-- 	<view style="width: 710rpx;margin: 20rpx;">
				<u-notice-bar mode="vertical" bg-color='rgb(255, 239, 239)' fontSize='24' :more-icon='true'
					color='#FF000A' :list="list"></u-notice-bar>
			</view> -->
			<view style="background-color: #fff;padding-top: 24rpx;margin-top: 20rpx;">
				<!-- <view class="sd_one_item" style="margin-left: 25rpx;">
					<text class="sd_one_name">持卡免费入园</text>
				</view>
				<view class="sd_buy_item">
					<view class="sd_one_item"><text style="color: #4A4949;font-weight: bold;">锦绣潇湘全域旅游年卡 </text><u-icon
							name="arrow-right"></u-icon></view>
					<view class="sd_one_item" style="color: #FF444B;font-size: 20rpx;"><u-icon
							name="thumb-up-fill"></u-icon><text>300家景区免费省心畅游，单次门票价值6000元以上 </text></view>
					<view class="sd_one_item" style="font-size: 20rpx;"><u-tag text="世界文化遗产" size='mini' type="info"
							bg-color='#ffffff00' /><text style="color: #2587FF;padding: 0rpx 24rpx;">可预约今日</text><text
							style="color: #929292;">30天无条件退</text></view>
					<view class="sd_one_item" style="font-size: 20rpx;color: #929292;"><text>快捷通道<text
								style="color: #C4C6CA;padding-left: 24rpx;">|</text></text><text
							style="padding: 0rpx 24rpx;">身份证入园<text
								style="color: #C4C6CA;padding-left: 24rpx;">|</text></text><text>已售20.3万+</text></view>
					<view class="sd_buy_item_b">
						<text style="color: #FF000A;font-size: 20rpx;">￥<text
								style="font-size: 32rpx;font-weight: bold;">298</text></text>
						<u-button type="error" :custom-style="customStyle">购买</u-button>
					</view>
				</view> -->

				<text
					style="color: #23292F;padding:0rpx 0rpx 24rpx 48rpx;font-weight: bold;font-size: 40rpx;">景区简介</text>
				<view style="width: 654rpx;margin-left: 48rpx;margin-top: 24rpx;">
					<u-read-more text-indent='0em' :toggle='true' :shadow-style="shadowStyle" show-height='230'
						ref="uReadMore" close-text='开展更多' :isLine='false' color='#488CFE' iconUp='arrow-up'
						iconDown='arrow-down'>
						<u-parse :html="scenicInfo.goodsInfo.introduction"></u-parse>
					</u-read-more>
				</view>
			</view>
			<view style="background-color: #fff;margin-top: 24rpx;">
				<text
					style="padding: 24rpx;font-size: 32rpx;color: #3D3D3D;display:block;font-family: Source Han Sans;">附近玩乐</text>

				<view class="sd_fjwl_item" v-for="(item,index) in nearbyScenicList" :key="index"
					@click="toNearScenic(item.request)">
					<u-image :lazy-load="true" width='236rpx' height='192rpx' border-radius='8rpx'
						:src="item.mainPic||'https://aliyunoss.hntgov.net/sd/all_moren.png'"
						mode="aspectFill"></u-image>
					<view class="sd_fjwl_item_r">
						<view class="sd_fjwl_item_r_title">
							{{item.scenicName||''}}
						</view>
						<view>
							<text class="sd_item_tag" v-if="item.item.grade">{{item.grade}}</text>
							<view v-if="item.tags" style="margin-right: 20rpx;">
								<view v-for="(item1,index1) in (item.tags.split(','))" :key="index1">
								<u-tag :text="item1" size='mini' type="info"
									 bg-color='#fff' />
									</view>
							</view>
						</view>
						<view style="font-size: 24rpx;">
							<text style="color: #4A4949;" v-if="item.openTime">{{item.openTime}}</text><text
								style="color: #C4C6CA;padding:0rpx 24rpx" v-if="item.openTime">|</text><text
								style="color: #929292;" v-if="item.distance">距离{{item.distance}}km</text>
						</view>

						<view style="width: 100%;position: relative;display: flex;align-items: center;"
							v-if="item.price">
							<view style="color: #FF444B;font-size: 20rpx;width: 70%;">{{item.cardModelName||'-'}}
								<text v-if="item.preferential=='FREE'&&item.totalTimes==0">不限次免门票</text>
								<text
									v-if="item.preferential=='FREE'&&item.totalTimes!=0">免门票{{item.totalTimes}}次</text>
								<text v-if="item.preferential=='DISCOUNT'">享{{item.discountPercentage}}%折扣价</text>
								<text v-if="item.preferential=='PREFERENTIAL'">享优惠价{{item.discountAmount}}元</text>
							</view><text style="font-size: 20rpx;color: #FF444B;position: absolute;right: 0rpx;">￥<text
									style="font-size: 28rpx;">{{item.price}}</text><text
									style="color: #C4C6CA;">起</text></text>
						</view>
					</view>
				</view>


			</view>

			<view style="background-color: #fff;margin-top: 24rpx;" v-if="false">
				<text
					style="padding: 24rpx 24rpx 0rpx 24rpx;font-size: 32rpx;color: #3D3D3D;display:block;font-family: Source Han Sans;">玩家们的点评</text>
				<view class="sd_buy_item_p">
					<view class="sd_buy_header">
						<image src="https://aliyunoss.hntgov.net/sd/mr_tx_sd.png" mode="aspectFill"></image>
						<view class="sd_buy_header_r">
							<text>匿名</text>
							<view style="display: flex;">
								<view class="sd_buy_header_r_view" v-for="(item,index) in 5" :key="index"><u-icon
										name="star-fill" size='12' style="color: #fff;"></u-icon></view>
								<text style="font-size: 24rpx;">5分</text>
							</view>
						</view>
					</view>
					<view class="sd_buy_item_p_nr">
						武陵源风景名胜区是湖南之行最惊艳的景区强烈安利 在质惠游湖南小程序上直接购买旅游卡，可免费入可免费入
					</view>
					<view class="sd_buy_item_p_tp">
						<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode="aspectFill"
							v-for="(item,index) in 3"></image>

						<view class="sd_buy_item_p_tp_wz">
							共9张<u-icon name="arrow-right" style="color: #0DD381;" size='20'></u-icon>
						</view>
					</view>
					<view class="sd_buy_item_p_tj" @click="toScenicEva()">
						全部2条评论<u-icon name="arrow-right" style="color: #0DD381;" size='20'></u-icon>
					</view>

					<image src="https://aliyunoss.hntgov.net/sd/sd_item_yzdp.png" mode="aspectFill"
						style="width: 104rpx;height:100rpx;position: absolute;top: 24rpx;right: 24rpx;"></image>
				</view>
			</view>
			<view style="width: 750rpx;height: 200rpx;"></view>
		</view>
		<view style="position: fixed;bottom: 0rpx;padding: 30rpx;background-color: #fff;width: 750rpx;"
			v-if="scenicInfo.rule.isAppointment">
			<u-button throttle-time='3000' shape="circle" @click="yYsubmit()" type="primary"
				:custom-style="customStyle1">预约</u-button>
		</view>
		<image src="https://aliyunoss.hntgov.net/sd/sd_share_tb.png" @click="sharePoster()"
			style="width: 64rpx;height: 64rpx;position: absolute;top: 200rpx;right: 40rpx;"></image>

		<u-popup-tm v-model="show" mode='center' height='1300' border-radius='10' width='700' :mask='true'
			style='background-color: #00000000;'>
			<view
				style="width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;height: 100%;">
				<image :src="path" style="width: 630rpx;height: 1188rpx;"></image>
				<view style="margin-top: 20rpx;display: flex;">
					<image src="https://aliyunoss.hntgov.net/sd/sd_bcfxpyq.png" style="width: 168rpx;height: 144rpx;"
						@click="savePicture()"></image>
					<button data-name="shareBtn" open-type="share"
						style='background-color:#00000000;margin-left: 212rpx;width:96rpx;height: 144rpx;'>
						<image src="https://aliyunoss.hntgov.net/sd/sd_fxhy.png" style="width:inherit;height: inherit;">
						</image>
					</button>
				</view>
			</view>
		</u-popup-tm>
		<l-painter style="position: absolute;bottom: -10000rpx;" v-show="false" ref="painter" />
		

		<u-popup v-model="isDatePopup" mode='bottom'>
			<text style="margin: 20rpx 30rpx;font-weight: bold;display: block;color: #f00;"
				v-if="scenicInfo.goodsInfo.name">预约景区：{{scenicInfo.goodsInfo.name||''}}</text>
			<text style="margin: 20rpx 30rpx;font-weight: bold;display: block;">请选择预约日期</text>
			<scroll-view scroll-x="true" class="xsms-scroll">
				<view :class="day_index == index?'xsms-item':'xsms-item1'" v-for="(item,index) in dayArrayList"
					:key='index' @click.stop="dayList(item,index)">
					<view>{{item.enableDate}}</view>
					<!-- <view>{{item.enableDate.slice(5,item.enableDate.length)}}</view> -->
				</view>
			</scroll-view>
			<view v-if="dayItem.isEnabled">
				<view class="date_rq" v-if="isSlotList">
					<text>剩余{{dayItem.inventory==-1?'无限':dayItem.inventory}}</text>

					<text class="date_rq_text" @click="dayYuyue(1)">预约</text>
				</view>
				<view v-else>
					<view class="date_rq" v-for="(item,index) in dayItem.slotList" :key="index">
						<text> {{item.name}} {{item.time}}</text>
						<text style="margin-left: 100rpx;position: absolute;right: 300rpx;">
							剩余{{item.stock==-1?'无限':item.stock}}</text>
						<text class="date_rq_text" @click="dayYuyue(2,item)">预约</text>
					</view>
				</view>
			</view>
			<view v-else
				style="width:inherit;display: flex;justify-content: center;padding: 50rpx;font-size: 36rpx;font-weight: bold;">
				{{dayItem.reason||''}}
			</view>
		</u-popup>
	</view>
</template>

<script>
	var that = ''
	export default {
		data() {
			return {
				isSlotList: true,
				show: false,
				path: '',
				dayItem: '',
				day_index: 0,
				isDatePopup: false,
				dayArrayList: [],
				poster: {
					css: {
						width: "630rpx",
						height: "1188rpx",
						background: "#FFFFFF"
					},
					views: [{
							src: "https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg",
							type: "image",
							css: {
								background: "#fff",
								objectFit: "cover",
								width: "630rpx",
								boxSizing: "border-box",
								height: "622rpx",
							}
						},
						{
							type: "view",
							css: {
								paddingTop: "30rpx",
								paddingLeft: "40rpx",
								paddingRight: "40rpx",
								paddingBottom: "30rpx",
								display: "inline-block"
							},
							views: [{
									text: "张家界国家森林公园张家界国家森林公园张家界国家森林公园",
									type: "text",
									css: {
										display: "block",
										paddingBottom: "22rpx",
										color: "#3D3D3D",
										fontSize: "36rpx",
										fontWeight: "bold",
										lineClamp: 1,
										width: "550rpx"
									}
								},
								{
									type: "view",
									css: {

										paddingBottom: "22rpx",
									},
									views: []
								},
								{
									text: "张家界国家森林公园位于张家界市武陵源区金鞭路279号，1988年8月，张家界武陵源旅游区被列入国家重点风景名胜区旅游区被列入国家重点风景名胜区",
									type: "text",
									css: {
										display: "block",
										paddingBottom: "22rpx",
										color: "#4A4949",
										fontSize: "20rpx",
										lineClamp: 2,
										lineHeight: "48rpx",
										width: "550rpx"
									}
								},
								{
									type: "view",
									css: {
										height: "2rpx",
										background: "#e5e5e5",
										width: "550rpx",

									}
								},
								{
									type: "view",
									css: {
										paddingTop: "10rpx",
										paddingBottom: "32rpx",
										fontSize: "28rpx",
										fontWeight: "bold",
										width: "550rpx"
									},
									views: [{
											text: "持“",
											type: "text",
											css: {
												color: "#3D3D3D",
											}
										},
										{
											text: "锦绣潇湘全域旅游年卡锦绣潇湘全域旅游年卡",
											type: "text",
											css: {
												color: "#FF000A",
												width: "340rpx",
												lineClamp: 1,
											}
										},
										{
											text: "”享优惠",
											type: "text",
											css: {
												color: "#3D3D3D",
											}
										}
										// {
										// 	text: "门票5折",
										// 	type: "text",
										// 	css: {
										// 		color: "#FF000A",
										// 	}
										// },
										// {
										// 	text: "优惠",
										// 	type: "text",
										// 	css: {
										// 		color: "#3D3D3D",
										// 	}
										// },
									]
								},

								{
									type: "view",
									css: {
										paddingTop: "10rpx",
										paddingBottom: "32rpx",
										fontSize: "28rpx",
										fontWeight: "bold",
										width: "550rpx"
									},
									views: [{
											type: "view",
											css: {
												fontSize: "28rpx",
												height: "144rpx",
												display: "inline-block",
											},
											views: [{
													type: "view",
													css: {
														fontSize: "24rpx",
														paddingTop: "22rpx",
													},
													views: [{
															text: "湖南旅游就上“",
															type: "text",
															css: {
																color: "#000000",
															}
														},
														{
															text: "质惠游湖南",
															type: "text",
															css: {
																color: "#FF000A",
															}
														},
														{
															text: "”",
															type: "text",
															css: {
																color: "#000000",
															}
														},
													],
												},
												{
													text: "-- 扫码或长按识别 开启湖南惠游之旅  --",
													type: "text",
													css: {
														display: "block",
														color: "#979797",
														fontSize: "20rpx",
														paddingTop: "18rpx",
													}
												}
											]
										},
										{
											src: "https://aliyunoss.hntgov.net/sd/zfb_xcxm.png",
											type: "image",
											css: {
												display: "inline-block",
												background: "#fff",
												objectFit: "cover",
												width: "170rpx",
												boxSizing: "border-box",
												height: "148rpx",
												marginLeft: "20rpx"
											}
										},
									]
								},

							],
						}
					]
				},



				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "10rpx",
					justifyContent: 'flex-start'
				},
				customStyle1: {
					backgroundColor: '#488CFE'
				},
				customStyle: {
					fontSize: '22rpx',
					width: '92rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					height: '56rpx',
					marginLeft: '12rpx'
				},
				content: `张家界国家森林公园位于张家界市武陵源区金鞭路279号，1988年8月，张家界武陵源旅游区被列入国家重点风景名胜区；1992年12月，因奇特的石英砂岩大峰林被联合国列入《世界自然遗产名录》，2004年2月被列入世界地质公园；2007年被列入中国首批国家5A级旅游景区张家界国家森林公园位于张家界市武陵源区金鞭路279号，1988年8月，张家界武陵源旅游区被列入国家重点风景名胜区；1992年12月，因奇特的石英砂岩大峰林被联合国列入《世界自然遗产名录》，2004年2月被列入世界地质公园；2007年被列入中国首批国家5A级旅游景区...`,
				list: [
					'锦瑟无端五十弦，一弦一柱思华年',
					'庄生晓梦迷蝴蝶，望帝春心托杜鹃',
					'沧海月明珠有泪，蓝田日暖玉生烟',
				],
				list1: [],
				menuButtonInfo: 0,
				scenicInfo: {
					goodsInfo: {
						tags: ''
					}
				},
				tags: [],
				obj: {
					"scenicId": "",
					"channel": "Channel_BJ",
					"thirdId": "",
					"cardNum": "",
					"mobile": ""
				},
				cardModelName: '',
				nearbyScenicList: [],
				name: '',
				idNo: '',
				mobile: '',
				otherObj: ''

			}
		},
		onLoad(e) {
			that = this
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.obj.scenicId = e.scenicId
			this.obj.channel = e.channel
			this.obj.thirdId = e.thirdId
			this.obj.cardNum = e.cardNum
			this.name = e.name
			this.idNo = e.idNo
			this.mobile = e.mobile
			this.cardModelName = e.cardModelName

			this.obj.mobile = uni.getStorageSync('phone')
			this.getecnicDetailMethod()
		},
		methods: {

			yYsubmit() {
				this.isDatePopup = true

			},
			dayList(e, index) {
				this.day_index = index
				this.dayItem = e
				this.isSlotList = this.dayItem.slotList.length == 0 ? true : false
			},
			openLocation() {
				uni.openLocation({
					latitude: parseFloat(this.scenicInfo.shop.lat),
					longitude: parseFloat(this.scenicInfo.shop.lng),
					// 目标位置的名称
					name: this.scenicInfo.shop.name,
					// 目标位置的详细地址
					address: this.scenicInfo.shop.address,
					// 地图缩放比例
					scale: 18,
					success: function() {
						console.log('success');
					}
				});
			},
			getecnicDetailMethod() {
				this.$u.api.getecnicDetail(this.obj).then(res => {
					this.scenicInfo = res.data
					this.nearbyScenicList = res.data.nearbyScenicList
					that.$store.commit('setScenicInfo', res.data)
					this.list1 = []
					this.list1.push({
						image: res.data.goods.mainPic
					})
					this.poster.views[0].src = res.data.goods.mainPic || ''
					this.poster.views[1].views[0].text = res.data.goods.name || ''
					this.poster.views[1].views[2].text = res.data.shop.address || ''
					this.poster.views[1].views[4].views[1].text = res.data.cardModel.name || ''
					if (res.data.goods.grade) {
						this.poster.views[1].views[1].views = []
						this.poster.views[1].views[1].views.push({
							text: res.data.goods.grade,
							type: "text",
							css: {
								textAlign: "center",
								color: "#fff",
								fontSize: "20rpx",
								width: "40rpx",
								height: "32rpx",
								background: "linear-gradient(90deg,#FF000A  0%, #FCB13A  100%)",
								lineHeight: "32rpx",
								borderRadius: "4rpx",
								marginRight: "32rpx"
							}
						})
					}
					if (res.data.goodsInfo.tags) {
						this.tags = res.data.goodsInfo.tags.split(',')
						this.tags.forEach((item, index) => {
							this.poster.views[1].views[1].views.push({
								text: item,
								type: "text",
								css: {
									textAlign: "center",
									color: "#929292",
									fontSize: "20rpx",
									paddingLeft: "8rpx",
									paddingRight: "8rpx",
									height: "30rpx",
									border: "1rpx solid #929292",
									lineHeight: "32rpx",
									borderRadius: "4rpx",
									marginRight: "32rpx"
								}
							})
						})
					}
					if (res.data.shop.introduction) {
						this.poster.views[1].views[2].text = res.data.shop.introduction
					}

					if (res.data.calendar.length != 0) {
						this.dayArrayList = res.data.calendar
						this.dayItem = res.data.calendar[this.day_index]
						this.isSlotList = this.dayItem.slotList.length == 0 ? true : false
					}
					this.$nextTick(() => {
						this.$refs.uReadMore.init();
					})
				})
			},
			savePicture() {
				uni.saveImageToPhotosAlbum({
					filePath: that.path,
					success: function() {
						that.show = false
						uni.showToast({
							icon: 'success',
							title: '保存成功'
						})
					}
				});
			},
			onShareAppMessage: function(e) {
				return {
					title: '质惠游',
					path: 'pages/index/index',
				}
			},
			// onShareTimeline(res) {
			// 	return {
			// 		title: '质惠游湖南',
			// 		path: 'pages/index/mall',
			// 	}
			// },
			dayYuyue(e, f) {
				let obj = {
					"scenicId": this.obj.scenicId,
					"channel": this.obj.channel,
					"thirdId": this.obj.thirdId,
					"cardNum": this.obj.cardNum,
					"mobile": this.mobile,
					"cardModelName": this.cardModelName,
					"appointDate": this.dayItem.enableDate,
					"timeId": '',
					"name": this.name,
					"idNo": this.idNo
				}
				if (e == 2) {
					obj.timeId = f.id
					obj.appointDate = obj.appointDate + ' ' + f.time.split('~')[0] + ':00'
				}
				console.log(obj);
				this.$u.api.postAppoint(obj).then(res => {
					if (res) {
						this.isDatePopup = false
						uni.showToast({
							icon: 'success',
							title: '预约成功'
						})
					}
				})
			},
			sharePoster() {
				uni.showLoading({})
				this.$refs.painter.render(this.poster);
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						that.show = true
						that.path = res.tempFilePath
						uni.hideLoading()
						// 非H5 保存到相册
						// H5 提示用户长按图另存

					},
				});
			},
			goBack() {
				if (this.otherObj == '') {
					uni.navigateBack()
				} else {
					this.obj = this.otherObj
					this.otherObj = ''
					this.getecnicDetailMethod()
				}

			},
			toScenicInfo() {
				uni.navigateTo({
					url: `scenicinfo`
				})
			},
			toScenicEva() {
				uni.navigateTo({
					url: 'sceniceva'
				})
			},
			toNearScenic(e) {
				this.$store.commit('setScenicRequst',e)
				uni.navigateTo({
					url:'/pages/card/scenicjd'
				})
			}
		}
	}
</script>
<style>
	page {
		background: #f8f8f8;
	}
</style>
<style lang="less" scoped>
	.sd_buy_item_p {
		width: 702rpx;
		margin: 24rpx;
		padding: 24rpx;
		margin-bottom: 0rpx;
		position: relative;

		.sd_buy_item_p_nr {
			font-size: 28rpx;
			color: #4A4949;
			line-height: normal;
			overflow: hidden !important;
			text-overflow: ellipsis !important;
			display: -webkit-box !important;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			width: 654rpx;
		}

		.sd_buy_item_p_tj {
			width: 654rpx;
			margin-top: 48rpx;
			color: #0DD381;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.sd_buy_item_p_tp {
			display: flex;
			gap: 15rpx;
			width: 654rpx;
			margin-top: 24rpx;
			position: relative;

			image {
				width: 208rpx;
				height: 210rpx;
				border-radius: 8rpx;
			}

			.sd_buy_item_p_tp_wz {
				width: 208rpx;
				height: 210rpx;
				border-radius: 8rpx;
				background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
				position: absolute;
				right: 2rpx;
				top: 0rpx;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
		}

		.sd_buy_header {
			display: flex;

			.sd_buy_header_r {
				display: flex;
				flex-direction: column;
				margin-left: 16rpx;
				color: #3D3D3D;
			}

			.sd_buy_header_r_view {
				width: 24rpx;
				height: 24rpx;
				background-color: #FCCF0A;
				border-radius: 8rpx;
				display: flex;
				margin-right: 8rpx;
				align-self: center;
				justify-content: center;
			}

			image {
				width: 65rpx;
				height: 65rpx;
			}
		}
	}

	.sd_fjwl_item {
		padding: 20rpx;
		width: 702rpx;
		margin-left: 24rpx;
		display: flex;

		image {
			width: 236rpx;
			height: 192rpx;
			border-radius: 8rpx;
		}

		.sd_fjwl_item_r {
			width: 402rpx;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			gap: 16rpx;

			.sd_fjwl_item_r_title {
				width: 402rpx;
				overflow: hidden !important;
				text-overflow: ellipsis !important;
				display: -webkit-box !important;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				color: #4A4949;
			}

			.sd_item_tag {
				padding: 3rpx 8rpx 3rpx 8rpx;
				color: #fff;
				font-size: 20rpx;
				background: linear-gradient(90deg, #FF000A -18%, #FCB13A 141%);
				border-radius: 4rpx;
				margin-right: 24rpx;
			}
		}
	}

	button::after {
		border: none;
	}
	button{
		border: none;
	}

	.sd_buy_item {
		width: 700rpx;
		margin: 25rpx;
		background: linear-gradient(270deg, rgba(255, 240, 240, 0.1) 6%, rgba(255, 240, 240, 0.4) 13%, rgba(255, 240, 240, 0.5) 29%, rgba(255, 240, 240, 0.6898) 61%, rgba(255, 240, 240, 0.8338) 79%, #FFF0F0 100%);
		display: flex;
		flex-direction: column;
		padding: 24rpx;
		gap: 16rpx;
		border-radius: 8rpx;
		position: relative;
		margin-bottom: 60rpx;

		.sd_buy_item_b {
			position: absolute;
			top: 132rpx;
			right: 30rpx;
			display: flex;
			align-items: center;
		}
	}

	.sd_one {
		width: 700rpx;
		margin-left: 25rpx;
		margin-top: -30rpx;
		background-color: #fff;
		padding: 24rpx;
		border-radius: 20rpx 20rpx 0px 0px;
	}

	.sd_one_item {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.sd_one_name {
			color: #4A4949;
			font-size: 36rpx;
			font-weight: 600;
			margin-right: 24rpx;
		}

		.sd_one_level {
			padding: 6rpx 10rpx;
			background: linear-gradient(90deg, #FF000A -18%, #FCB13A 141%);
			font-size: 20rpx;
			border-radius: 4rpx;
			color: #fff;
		}

	}

	.xsms-scroll {
		width: 698rpx;
		overflow: hidden;
		white-space: nowrap;
		margin-left: 22rpx;
	}

	.xsms-item {
		display: inline-block;
		width: 180rpx;
		height: 80rpx;
		border-radius: 4rpx;
		margin-right: 8rpx;
		margin-left: 8rpx;
		margin-top: 9rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #488CFE;
		color: #fff;
		font-size: 12px;
	}

	.xsms-item1 {
		display: inline-block;
		width: 180rpx;
		height: 80rpx;
		border-radius: 4rpx;
		margin-right: 8rpx;
		margin-left: 8rpx;
		margin-top: 9rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #F2F2F2;
		color: #211E1E;
		font-size: 12px;
	}

	.date_rq {
		width: 690rpx;
		margin: 30rpx;
		position: relative;
		display: flex;
		align-items: center;

		.date_rq_text {
			padding: 4rpx 10rpx;
			color: #fff;
			background-color: #488CFE;
			border-radius: 4rpx;
			position: absolute;
			right: 0rpx;
		}
	}
</style>